
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" style="border:1px solid #000000;position:absolute;top:0;left:0;">
</canvas>

<script>
window.addEventListener("resize",resizeCanvas,false);
function resizeCanvas() {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
}

var canvas = document.getElementById("myCanvas");
resizeCanvas();

var ctx = canvas.getContext("2d");

var isDrawingRect = false;
var isDrawingLine = false;
var initialRect = {};
var dashedLine = {};

var rectangles = [];

canvas.onmousedown = function(e) {
   var pos = getMousePos(canvas,e);

   if (!isDrawingRect && !isDrawingLine && !isPointInAnyRect(pos)) {
       clearCanvasAndReset();
       initialRect.left = pos.x;
       initialRect.top = pos.y;
       initialRect.right = pos.x;
       initialRect.bottom = pos.y;
       isDrawingRect = true;
   } else if (isPointInRect(pos,initialRect)) {
       dashedLine.startX = pos.x;
       dashedLine.startY = pos.y;
       isDrawingLine = true;
   }
};

function isPointInAnyRect(point) {
   return rectangles.some(function(rect) {
       return isPointInRect(point,rect);
   }) || isPointInRect(point,initialRect);
}

function clearCanvasAndReset() {
   clearCanvas();
   initialRect = {};
   rectangles = [];
   dashedLine = {};
   isDrawingRect = false;
   isDrawingLine = false;
}

canvas.onmousemove = function(e) {
   var pos = getMousePos(canvas,e);
   clearCanvas();

   if (isDrawingRect) {
       initialRect.right = pos.x;
       initialRect.bottom = pos.y;
   } 

   if (isDrawingLine){
       var horizontal = Math.abs(pos.x - dashedLine.startX) > Math.abs(pos.y - dashedLine.startY);
       dashedLine.endX = horizontal ?pos.x :dashedLine.startX;
       dashedLine.endY = horizontal ?dashedLine.startY :pos.y;
   }

   if (Object.keys(initialRect).length) {
       drawRectangle(initialRect,'black');
   }
   
   if (Object.keys(dashedLine).length) {
       drawDashedLine(dashedLine,'red');
   }
};

canvas.onmouseup = function(e) {
   if (isDrawingLine) {
       var pos = getMousePos(canvas,e);
       fillSubRectangles(dashedLine,pos);
       dashedLine = {};
       isDrawingLine = false;
   }

   if (isDrawingRect) {
       isDrawingRect = false;
   }
};

function getMousePos(canvas,evt) {
   var rect = canvas.getBoundingClientRect();
   return {
       x:evt.clientX - rect.left,
       y:evt.clientY - rect.top
   };
}

function isPointInRect(point,rect) {
   return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
}

function drawRectangle(rect,color) {
   ctx.beginPath();
   ctx.rect(rect.left,rect.top,rect.right - rect.left,rect.bottom - rect.top);
   ctx.strokeStyle = color;
   ctx.stroke();
}

function drawDashedLine(line,color) {
   ctx.beginPath();
   ctx.setLineDash([5]);
   ctx.moveTo(line.startX,line.startY);
   ctx.lineTo(line.endX,line.endY);
   ctx.strokeStyle = color;
   ctx.stroke();
   ctx.setLineDash([]);
}

function clearCanvas() {
   ctx.clearRect(0,0,canvas.width,canvas.height);
   redrawAllRectangles();
}

function redrawAllRectangles() {
  rectangles.forEach(function(rect) {
      drawRectangle(rect,rect.color);
  });
  if (Object.keys(initialRect).length) {
      drawRectangle(initialRect,'black');
  }
}

function fillSubRectangles(dashedLine,pos) {
   var horizontal = dashedLine.endY === dashedLine.startY;
   var rect1,rect2;
   if (horizontal) {
       rect1 = {
           left:initialRect.left + 5,
           top:initialRect.top + 5,
           right:initialRect.right - 5,
           bottom:dashedLine.startY - 5,
           color:'blue'
       };

       rect2 = {
           left:initialRect.left + 5,
           top:dashedLine.startY + 5,
           right:initialRect.right - 5,
           bottom:initialRect.bottom - 5,
           color:'green'
       };
   } else {
       rect1 = {
           left:initialRect.left + 5,
           top:initialRect.top + 5,
           right:dashedLine.startX - 5,
           bottom:initialRect.bottom - 5,
           color:'blue'
       };

       rect2 = {
           left:dashedLine.startX + 5,
           top:initialRect.top + 5,
           right:initialRect.right - 5,
           bottom:initialRect.bottom - 5,
           color:'blue'
       };
   }
  rectangles.push(rect1,rect2);
  redrawAllRectangles();
}

</script>

</body>